<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  // 矩阵数据
  matrixData: {
    type: Object,
    required: true
  },
  // 标题
  title: {
    type: String,
    default: ''
  }
});

// 格式化节点名称，将数字转换为下标
const formatNodeName = (nodeName) => {
  // 特殊处理xi字符串
  if (nodeName === 'xi') {
    return 'x<sub>i</sub>';
  }

  const match = nodeName.match(/^([a-zA-Z]+)(\d+)$/);
  if (match) {
    const prefix = match[1];
    const number = match[2];
    return `${prefix}<sub>${number}</sub>`;
  }
  return nodeName;
};

// 计算表格的列数 (节点数)
const columnCount = computed(() => {
  return props.matrixData.nodes.length;
});
</script>

<template>
  <div class="matrix-table-container">
    <table class="matrix-table">
      <thead>
        <tr>
          <th></th>
          <th v-for="(node, index) in matrixData.nodes" :key="index">
            <span v-html="formatNodeName(node)"></span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in matrixData.data" :key="rowIndex">
          <td class="flow-cell">
            <span v-html="formatNodeName(row.flow)"></span>
          </td>
          <td 
            v-for="(value, colIndex) in row.values" 
            :key="colIndex" 
            class="value-cell"
            :class="{ 'has-value': value !== null && value !== undefined && value !== '' && row.flow !== 'xi'   }"
          >
            {{ value !== null ? value : '' }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.matrix-table-container {
  margin-bottom: 20px;
  overflow-x: auto;
}

.matrix-title {
  font-size: 16px;
  color: #fff;
  margin-bottom: 12px;
  padding-left: 4px;
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  background-color: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.matrix-table th, 
.matrix-table td {
  padding: 0px;
  height: 30px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.matrix-table th {
  background-color: #000;
  font-weight: 400;
}

.flow-cell {
  /* font-weight: bold; */
  background-color: #000;
}

.value-cell {
  /* font-family: 'DIN', monospace; */
  background-color: #000;
}

.has-value {
  background-color: #1b4b47;
}
</style> 